package com.example.helloworld

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.helloworld.ui.theme.Gray
import com.example.helloworld.ui.theme.HelloWorldTheme
import com.example.helloworld.ui.theme.Pink100
import com.example.helloworld.ui.theme.Pink900
import com.example.helloworld.ui.theme.White
import com.example.helloworld.ui.theme.button
import com.example.helloworld.ui.theme.medium
import com.example.helloworld.ui.theme.subtitle1
import com.example.helloworld.ui.theme.welcomeAssets

@Composable
fun WelcomePage() {
    Box(
        modifier = Modifier.fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        Image(
            painter = rememberVectorPainter(image = ImageVector.vectorResource(id = MaterialTheme.welcomeAssets.background)),
            contentDescription = "welcome_bg",
            modifier = Modifier.fillMaxSize()
        )
        WelcomeContent()
    }
}

@Composable
fun WelcomeContent() {
    Column (
        modifier = Modifier.fillMaxSize()
    ) {
        Spacer(Modifier.height(72.dp))
        LeafImage()

        Spacer(Modifier.height(48.dp))
        WelcomeTitle()

        Spacer(Modifier.height(40.dp))
        WelcomeButtons()

    }

}

@Composable
fun LeafImage() {
    Image(
        painter = rememberVectorPainter(image = ImageVector.vectorResource(id = MaterialTheme.welcomeAssets.illos)),
        contentDescription = "welcome_illos",
        modifier = Modifier
            .wrapContentSize()
            .padding(start = 88.dp)
    )
}

@Composable
fun WelcomeTitle() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            painter = rememberVectorPainter(image = ImageVector.vectorResource(id = MaterialTheme.welcomeAssets.logo)),
            contentDescription = "logo",
            modifier = Modifier
                .wrapContentWidth()
                .height(32.dp)
        )
        Box(
            modifier = Modifier.fillMaxWidth().height(32.dp),
            contentAlignment = Alignment.BottomCenter
        ) {
            Text(
                text = "Beautiful home garden solutions",
                textAlign = TextAlign.Center,
                style = subtitle1,
                color = MaterialTheme.colorScheme.onPrimary
            )
        }
    }
}

@Composable
fun WelcomeButtons() {
    Column (
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(
            onClick = {},
            modifier = Modifier.height(48.dp)
                .padding(horizontal = 16.dp)
                .fillMaxWidth()
                .clip(medium),
            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.secondary)
        ) {
           Text(
               text = "Create an account",
               style = button,
               color = MaterialTheme.colorScheme.onSecondary
           )
        }
    }

}

@Preview
@Composable
fun WelcomeLightPagePreview() {
    HelloWorldTheme(darkTheme = false) {
        WelcomePage()
    }
}
@Preview
@Composable
fun WelcomeDarkPagePreview() {
    HelloWorldTheme(darkTheme = true) {
        WelcomePage()
    }
}
